<template>
  <div class="batch-tracking-section">
    <h4>批量上传埋点 <el-icon><Tools /></el-icon></h4>
    <p>
      批量埋点技术可以大幅减少网络请求数量，提高性能和用户体验。
      我们的埋点脚本支持智能批处理，在合适的时机一次性上传多个事件数据。
    </p>

    <el-alert
      title="性能提升"
      description="批量上传可减少高达90%的网络请求，显著提升页面性能和用户体验。特别适合事件密集型应用。"
      type="info"
      :closable="false"
      show-icon
      style="margin-bottom: 20px"
    />

    <el-card title="1. 配置批量上传" style="margin-bottom: 20px">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>1. 配置批量上传</span>
          <el-button type="text" :icon="DocumentCopy" @click="copyCode(batchTrackingExamples.batchConfig)">
            复制代码
          </el-button>
        </div>
      </template>
      <p>通过以下属性启用和配置批量上传功能：</p>
      <ul>
        <li><code>data-batch-enabled</code>: 启用批量上传，值为"true"或"false"</li>
        <li><code>data-batch-size</code>: 批量上传的事件数量阈值，默认为10</li>
        <li><code>data-batch-interval</code>: 定期上传的时间间隔（毫秒），默认为30000（30秒）</li>
      </ul>
      <pre class="code-block"><code>{{ batchTrackingExamples.batchConfig }}</code></pre>
    </el-card>

    <el-card title="2. 批量上传使用方式" style="margin-bottom: 20px">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>2. 批量上传使用方式</span>
          <el-button type="text" :icon="DocumentCopy" @click="copyCode(batchTrackingExamples.batchUsage)">
            复制代码
          </el-button>
        </div>
      </template>
      <p>
        启用批量上传后，系统会自动收集埋点事件，并在特定条件下触发上传。
        您也可以手动触发上传。
      </p>
      <pre class="code-block"><code>{{ batchTrackingExamples.batchUsage }}</code></pre>
    </el-card>

    <el-card title="3. 关键事件处理" style="margin-bottom: 20px">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>3. 关键事件处理</span>
          <el-button type="text" :icon="DocumentCopy" @click="copyCode(batchTrackingExamples.criticalEvents)">
            复制代码
          </el-button>
        </div>
      </template>
      <p>
        对于重要的业务事件（如支付、注册），您可以配置为关键事件，确保立即上传而不进入批处理队列。
      </p>
      <pre class="code-block"><code>{{ batchTrackingExamples.criticalEvents }}</code></pre>
    </el-card>

    <el-card title="4. 页面关闭前数据处理">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>4. 页面关闭前数据处理</span>
          <el-button type="text" :icon="DocumentCopy" @click="copyCode(batchTrackingExamples.pageUnloadTracking)">
            复制代码
          </el-button>
        </div>
      </template>
      <p>
        埋点脚本会自动处理页面关闭前的数据上传，使用 <code>navigator.sendBeacon</code> API确保数据不丢失。
      </p>
      <pre class="code-block"><code>{{ batchTrackingExamples.pageUnloadTracking }}</code></pre>
      
      <el-divider />
      
      <el-alert
        title="技术细节"
        type="success"
        :closable="false"
        show-icon
      >
        <div>
          <p>页面关闭前的数据发送使用了 <code>navigator.sendBeacon</code> API，这是一个专为页面卸载场景设计的API，具有以下优势：</p>
          <ul>
            <li>异步发送数据，不会阻塞页面卸载过程</li>
            <li>浏览器保证在页面完全卸载前尝试发送数据</li>
            <li>不受CORS限制，简化跨域场景</li>
            <li>比 <code>XMLHttpRequest</code> 和 <code>fetch</code> 更可靠</li>
          </ul>
        </div>
      </el-alert>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { DocumentCopy, Tools } from '@element-plus/icons-vue'

const scriptTag = 'script'

const batchTrackingExamples = {
  batchConfig: `<${scriptTag} 
  async 
  src="https://your-server.com/tracking/script.js" 
  data-tracking-id="YOUR_TRACKING_ID"
  data-batch-enabled="true"
  data-batch-size="10"
  data-batch-interval="30000"
></${scriptTag}>`,

  batchUsage: `// 自动批量上传
// 1. 事件会自动收集，在以下情况触发上传：
// - 达到配置的批量阈值(data-batch-size)
// - 达到配置的时间间隔(data-batch-interval)
// - 页面失去焦点或变为不可见
// - 页面关闭前

// 2. 手动触发批量上传
if (window.DevOpsBITracker) {
  // 将所有待处理事件立即上传
  window.DevOpsBITracker.flushEvents();
}`,

  criticalEvents: `// 配置关键事件（立即上传，不进入批处理队列）
if (window.DevOpsBITracker) {
  window.DevOpsBITracker.updateConfig({
    criticalEvents: ['purchase', 'signup', 'login', 'payment']
  });
  
  // 当事件类别和动作包含关键词时，会立即上传
  window.DevOpsBITracker.trackEvent(
    'user_flow', 
    'complete_purchase',  // 包含'purchase'，会立即上传
    'checkout_button', 
    orderValue
  );
}`,

  pageUnloadTracking: `// 页面关闭前的数据上传
window.addEventListener('beforeunload', function() {
  // 不需要手动调用，脚本会自动处理
  // 内部使用navigator.sendBeacon API确保数据发送
  
  // 如果有特殊需求，可以手动触发
  if (window.DevOpsBITracker) {
    // 添加会话结束事件
    window.DevOpsBITracker.trackEvent(
      'session',
      'end',
      'user_exit',
      sessionDuration
    );
    
    // 立即上传所有待处理事件
    window.DevOpsBITracker.flushEvents();
  }
});`
}

const copyCode = (code: string) => {
  navigator.clipboard.writeText(code)
    .then(() => ElMessage.success('代码已复制到剪贴板'))
    .catch(() => ElMessage.error('复制失败'))
}
</script>

<style scoped lang="scss">
.batch-tracking-section {
  h4 {
    margin-top: 0;
  }
  
  ul {
    padding-left: 20px;
    
    li {
      margin: 8px 0;
    }
  }
  
  code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
  }
}

.code-block {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  margin-top: 12px;
  
  code {
    background: none;
    padding: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}
</style>
